<ui:composition 
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:ds="http://deltaset.org/deltaset-faces"
    xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface
        name="uploadComponent"
        componentType="compositeFileUpload">
        <composite:attribute name="label"/> 
        <composite:attribute name="value"/>       
        <composite:attribute name="formId"/>
    </composite:interface>

    <composite:implementation>
        <c:set var="refresherId" value="#{cc.clientId}:refreshAfterUpload"/>
        <c:set var="progressBarId" value="#{cc.clientId}:progressBar"/>
        <h:commandButton value="refreshAfterUpload" id="refreshAfterUpload" immediate="true" style="display:none">
            <f:ajax render="@form"/>
        </h:commandButton>       
        <script>
jQuery(document).ready(function () {     
    
    var fileUploadField = document.getElementById('#{cc.clientId}');
    var progressObj = document.getElementById("#{progressBarId}");
    //jQuery('.ds-fileupload').fileupload({    
    jQuery(fileUploadField).fileupload({         
        headers:{'Faces-Request':'partial/ajax'},
        formData:function (form) {
            var fArray=[
           {
               name:'javax.faces.partial.ajax',
               value:'true'
           },
           {
               name:'javax.faces.partial.render',
               value:'#{cc.attrs.formId}'
           },
           {
               name:'javax.faces.partial.execute',
               value:'#{cc.attrs.formId}'
           },
        ];
        var sArray = form.serializeArray();
        
        
        var exArray = [];
        for (var i in sArray) {            
            exArray[exArray.length] = sArray[i];
        }
        for (var i in fArray) {            
            exArray[exArray.length] = fArray[i];
        }
           return exArray;
        },        
        processData: false,
        contentType: false,
        cache: false,
        add:function (e, data) {
           // alert('execute add');
           jQuery.each(data.files, function (index, file) {
               // alert('Added file: ' + file.name+' file: '+file.size);
           });
    
           var jqXHR = data.submit().complete(function (result, textStatus, jqXHR) {
               var mockContext = {sourceid:'#{refresherId}'};
               //alert(result.status+"\n"+result.responseXML+"\n"+result.responseText); 
               deltaset.injectViewDataDIRECT(result);
               jsf.ajax.response(result, mockContext);
               
           });
        }        
    })
    .bind('fileuploadadd', function (e, data) {
       //alert('fileuploadadd event');
    })
    .bind('fileuploaddone', function (e, data) {
        //alert('uploaded! data='+data);         
         jQuery( progressObj ).hide();
    })
    .bind('fileuploadstart', function (e, data) {
        //alert('uploaded! data='+data);  
         jQuery( progressObj ).show();
         jQuery( progressObj ).progressbar({
                        value: 1
                });
    })
    .bind('fileuploadprogressall',function(e,data){
         var progress = parseInt(data.loaded / data.total * 100, 10);
         jQuery( progressObj ).progressbar({
                        value: progress
                });
    });
    
});
        </script>
        <h:outputLabel for="#{cc.clientId}" value="#{cc.attrs.label}:" styleClass="ds-label"/>
        <div class="ds-field">
            <input type="file" class="ds-fileupload" name="#{cc.clientId}" id="#{cc.clientId}"/>
            <div style="padding: 5px;">
                <div id="#{progressBarId}" style="overflow: hidden;display:none"></div>
            </div>        
            <ds:downloadFile value="#{cc.attrs.value}" rendered="#{not empty cc.attrs.value}"/>
            <div>#{cc.attrs.value.contentType}</div>
            <div>#{cc.attrs.value.fileSize/1000}Kb</div>
        </div>
    </composite:implementation>    
</ui:composition>